import React from 'react';
import styled, { css } from 'styled-components';
import styles from './styled.css';

/*
ts类型不太友好，不能知道 Button 到底有哪些 props 可以使用。
*/

const Button = styled.button`
  background: black;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;

  ${(props: any) =>
    props.primary &&
    css`
      background: palevioletred;
      color: white;
      font-weight: bold;
    `};
`;

export default function() {
  return (
    <div className={styles.normal}>
      <h1>Page styled</h1>
      <Button>execute</Button>
      <Button primary>primary</Button>
    </div>
  );
}
